<template>
  <div class="search-result">
    <van-list v-model="loading" :finished="finished" finished-text="没有更多了" @load="onLoad">
      <van-cell v-for="(article, index) in list" :key="index" :title="article.title" />
    </van-list>
  </div>
</template>

<script>
import { getSearchResult } from '@/api/search'
export default {
  name: 'SearchResult',
  components: {},
  props: {
    searchText: {
      type: String,
      required: true
    }
  },
  data () {
    return {
      list: [],
      loading: false,
      finished: false,
      page: 1, // 页数
      per_page: 10 // 每次获取文章数量
    }
  },
  // 计算属性
  computed: {},
  // 监控data中的数据变化
  watch: {},
  methods: {
    async onLoad () {
      // 1 请求获取数据
      const { data } = await getSearchResult({
        text: this.searchText,
        page: this.page,
        per_page: this.per_page
      })
      // console.log(data)
      // 2 将数据放置到数据列表中
      const { results } = data.data
      this.list.push(...results)
      // 3 关闭本次loading
      this.loading = false
      // 4 判断是否还有数据  这里的假数据是无穷的，因此不加判断了
      if (results.length) {
        // 1 有=》更新获取下一页的页码
        this.page++
      } else {
        // 2 没有=》把 finished 设置为true,关闭加载更多
        // 获取不到数据了
        this.finished = true
      }
    }
  },
  // 生命周期 - 创建完成（可以访问当前this实例）
  created () { },
  // 生命周期 - 挂载完成（可以访问DOM元素）
  mounted () { },
  beforeCreate () { }, // 生命周期 - 创建之前
  beforeMount () { }, // 生命周期 - 挂载之前
  beforeUpdate () { }, // 生命周期 - 更新之前
  updated () { }, // 生命周期 - 更新之后
  beforeDestroy () { }, // 生命周期 - 销毁之前
  destroyed () { }, // 生命周期 - 销毁完成
  activated () { } // 如果页面有keep-alive缓存功能，这个函数会触发
}
</script>

<style scoped lang='less'>
</style>
